<template>
  <el-dialog :title="mytitle" :visible="dialogShow" @close="cancel">
    <el-form :model="form" label-width="100px" :rules="rules" ref="myform">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" placeholder="1-50个字符"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" placeholder="1-50个字符"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <!-- <el-input v-model="form.manager" placeholder="请选择"></el-input> -->
        <el-select v-model="form.manager" placeholder="请选择">
          <el-option
            v-for="(item, index) in list"
            :key="index"
            :label="item.username"
            :value="item.username"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" placeholder="1-300个字符"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="subimt">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDeptApi, addDeptApi, getDeptDetailApi,updateDeptApi } from "@/api/departments";
import { getSimpleListApi } from "@/api/employees";
export default {
  // 从外界接收一个参数，控制面板的显示与隐藏
  props: ["dialogShow", "id"],
  data() {
    return {
      form: {
        name: "", //部门名称
        code: "", //部门编码
        manager: "", //部门负责人
        introduce: "", //部门介绍
      },
      titie: "",
      // 负责人列表
      list: [],
      rules: {
        name: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
          //   添加自定义校验规则
          {
            validator: async (rule, value, callback) => {
              // 同级部门中禁止出现重复的部门
              // 得到所有的部门数据
              const res = await getDeptApi();
              // 得到当前点击的添加子部门数据的id
              // 筛选出来同级部门数据
              // const res1 = res.data.depts.filter(item=>{
              //     return item.pid === this.id
              // })
              // // 判断同级部门中是否存在名称相同的部门
              // const bool = res1.some(item=>{
              //     return item.name === value
              // })
              // // 判断
              // bool ? callback(new Error('同级部门中禁止出现重复部门')) :callback()

              // 判断当前操作是新增还是编辑
              if (!this.form.id) {
                // 新增操作
                res.data.depts.some(
                  (item) => item.pid === this.id && item.name === value
                )
                  ? callback(new Error("同级部门中禁止出现重复部门"))
                  : callback();
              } else {
                // 编辑操作
                 res.data.depts.some(
                  (item) => item.pid === this.form.pid && item.id !==this.form.id && item.name ===value
                )
                  ? callback(new Error("同级部门中禁止出现重复部门"))
                  : callback();
              }
            },
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "部门编码不能为空", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
           //   添加自定义校验规则
          {
            validator: async (rule, value, callback) => {
              // 同级部门中禁止出现重复的部门
              // 得到所有的部门数据
              const res = await getDeptApi();
              // 判断当前操作是新增还是编辑
              if (!this.form.id) {
                // 新增操作
                res.data.depts.some(item=>{
                  return item.code === value
                }    
                )
                  ? callback(new Error("部门编码不能重复"))
                  : callback();
              } else {
                // 编辑操作
                 res.data.depts.some(
                  item =>  {
                    return item.code === value && item.id!==this.form.id
                  }
                )
                  ? callback(new Error("部门编码不能重复"))
                  : callback();
              }
            },
            trigger: "blur",
          },
          
        ],
        manager: [
          { required: true, message: "部门负责人不能为空", trigger: "blur" },
          //  { required: true, message: '请选择负责人', trigger: 'change' },
        ],
        introduce: [
          { required: true, message: "部门介绍不能为空", trigger: "blur" },
          {
            min: 1,
            max: 300,
            message: "长度在 1 到 300 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    mytitle: function () {
      return this.form.id ? "编辑部门" : "新增部门";
    },
  },
  methods: {
    // 得到当前操作的部门的详情
    async getDeptDetail(id) {
      const res = await getDeptDetailApi(id);
      // console.log(res);
      // 渲染数据
      this.form = res.data;
    },
    // 取消按钮
    cancel() {
      this.$emit("update:dialogShow", false);
      // 重置校验
      this.$refs.myform.resetFields();
      // 清空表单中的数据
      this.form = {
        name: "", // 部门名称
        code: "", // 部门编码
        manager: "", //部门负责人
        introduce: "", //部门介绍
      };
    },
    // 点击确定时触发事件
    subimt() {
      // 全局验证
      this.$refs.myform.validate(async (res) => {
        if (res) {
          // 验证通过
         if (!this.form.id) {
            // 得到新增的数据，发送请求到服务器
          await addDeptApi({
            ...this.form,
            pid: this.id,
          })
         } else {
          //  编辑操作
           await updateDeptApi(this.form)
         }
          // 关闭新增面板
          // this.$emit('closeDailog',false)
          this.$emit("update:dialogShow", false);
          // 提示新增成功
          this.$message({
            type: "success",
            message: this.form.id ? "编辑成功":"新增成功",
          });

         // 更新页面数据，
          this.$emit('updateData')

          // 清空表单中的数据
          this.form = {
            name: "", // 部门名称
            code: "", // 部门编码
            manager: "", //部门负责人
            introduce: "", //部门介绍
          };
         
        } else {
          // 验证失败
          console.log("失败");
        }
      });
    },
  },
  async created() {
    //   得到所有的负责人的列表
    const res = await getSimpleListApi();
    this.list = res.data;
  },
};
</script>

<style scoped>
</style>